<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>1.数据渲染方式-双花括号{{}}-缺点：会有闪烁</h1>
      <p>{{ msg }}</p>
      <p>{{ isshow ? '吃饭' : '吃粉'}}</p>

      <h1>2.数据渲染方式-指令 v-text；解决闪烁-缺点：不能编译标签</h1>
      <p v-text="tesmsg"></p>

      <h1>3.数据渲染方式-指令 v-html；解决闪烁和不能编译标签</h1>
      <p v-html="news"></p>

      <h1>4.数据渲染方式-指令 v-cloak；解决闪烁{{}}的闪烁</h1>
      <p v-cloak>{{ msg }}</p>

      <h1>5.数据渲染方式-指令 v-once；一次性插值</h1>
      <p>{{ num }}</p>
      <p v-once>{{ num }}</p>
      <input type="button" value="加1" @click="num++" />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    //vue的专长：处理数据，业务逻辑
    new Vue({
      el: "#app",
      data: {
        msg: "清华北大好难选哦,我250分",
        isshow: false,
        tesmsg: "抗疫英雄-<h2>钟南山</h2>",
        news: "印度感染人数全球<b>第二</b>",
        num: 0,
      },
    });
  </script>
</html>
